<template>
  <div>
    <a-button size="small" style="margin-right:5px" type="danger" @click="allMove">全部转移</a-button>
    <a-button size="small" :disabled="selectedRowKeys.length == 0" type="danger" @click="onTransfer(selectedRowKeys)">批量转移</a-button>
    <p></p>
    <s-table
      bordered
      ref="table"
      :row-key="(record) => record.abandon_id"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="customerColumns"
      :data="customerData"
    >
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`搜索${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterSelect"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-select
          show-search
          style="width: 188px; margin-bottom: 8px; display: block;"
          :placeholder="`选择${column.title}`"
          :value="selectedKeys[0]"
          :filter-option="filterOption"
          @change="(value) => setSelectedKeys(value ? [value] : [])"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
        </a-select>
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterSelect1"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-select
          show-search
          style="width: 188px; margin-bottom: 8px; display: block;"
          :placeholder="`选择${column.title}`"
          :value="selectedKeys[0]"
          :filter-option="filterOption"
          @change="(value) => setSelectedKeys(value ? [value] : [])"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          <a-select-option v-for="(item,index) in statusOpts" :key="index" :value="index">{{item}}</a-select-option>
        </a-select>
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <template slot="tm_name" slot-scope="text,record">
        {{text}}{{record.pt_name}}
      </template>
      <template slot="customer_status" slot-scope="text">
        {{statusOpts[text]}}
      </template>
      <template slot="first_type" slot-scope="text">
        {{typeOpts[text]}}
      </template>
      <template slot="phone" slot-scope="text">
        {{text}}
<!--        <a-tooltip placement="topLeft" :title="record.all_phone">-->
<!--          <a-button class="copy" :data-clipboard-text="record.all_phone" size="small" @click="copy">{{text}}</a-button>-->
<!--        </a-tooltip>-->
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button size="small" type="primary" style="margin-right:10px" @click="toDetail(record.customer_id)">详情</a-button>
        <a-button size="small" type="danger" @click="onTransfer(record.customer_id)">转移</a-button>
<!--        <a-button size="small" @click="delCustomer(record.customer_id)">删除</a-button>-->
      </template>
    </s-table>
    <a-modal
      title="转移数据"
      v-model="visible"
      :width="500"
      :confirm-loading="loading"
      @ok="submitTransfer"
    >
        <a-alert
          message="此操作不可逆"
          description="转移包含：客户、业务、合同"
          type="error"
          show-icon
        />
        <p></p>
        <a-select
          show-search
          v-model="transferForm['to']"
          :filter-option="filterOption"
          style="width: 100%"
          placeholder="请选择数据要转移给谁"
        >
          <a-select-option v-for="(item,index) in userOpts" :key="index" :value="index">{{item}}</a-select-option>
        </a-select>
    </a-modal>
    <a-modal
      title="全部转移"
      v-model="visible1"
      :width="500"
      :confirm-loading="loading"
      @ok="submitAll"
    >
      <a-alert
        message="此操作不可逆"
        description="转移包含：客户、业务、合同"
        type="error"
        show-icon
      />
      <p></p>
      <a-select
        show-search
        v-model="transferForm['to']"
        :filter-option="filterOption"
        style="width: 100%"
        placeholder="请选择数据要转移给谁"
      >
        <a-select-option v-for="(item,index) in userOpts" :key="index" :value="index">{{item}}</a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
import { STable } from '@/components'
import col from '@/columns/customer'
import { getAbandonList, getTransfer, postTransfer, allTransfer } from '@/api/customer'

export default {
  components: {
    STable
  },
  name: 'ShareCustomer',
  data () {
    return {
      customerColumns: col.share,
      customerData: parameters => {
        return getAbandonList(Object.assign(parameters, this.queryParam)).then(res => {
          this.typeOpts = res.result.type_opts
          this.adviserOpts = res.result.adviser_array
          this.statusOpts = res.result.customer_status
          return res.result
        })
      },
      searchInput: null,
      searchText: '',
      queryParam: {},
      adviserOpts: {},
      statusOpts: {},
      id: '',
      selectedRowKeys: [],
      transferForm: {},
      userOpts: {},
      loading: false,
      visible: false,
      visible1: false,
      typeOpts: {}
    }
  },
  methods: {
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    handleReset (clearFilters, dataIndex) {
      clearFilters()
      delete this.queryParam['filter[' + dataIndex + ']']
    },
    handleSelect (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    toDetail (id) {
      this.$router.push({ name: 'CustomerDetail', params: { id } })
    },
    onTransfer (id) {
      this.id = id
      getTransfer().then(res => {
        if (res.status === 0) {
          this.transferForm = {}
          this.userOpts = res.result.to_user_opts
          this.visible = true
        }
      })
    },
    allMove () {
      getTransfer().then(res => {
        if (res.status === 0) {
          this.transferForm = {}
          this.userOpts = res.result.to_user_opts
          this.visible1 = true
        }
      })
    },
    submitAll () {
      const app = this
      const data = {}
      app.loading = true
      data['to_uid'] = app.transferForm.to
      data['type'] = '1'
      allTransfer(data, this.queryParam).then(res => {
        if (res.status === 0) {
          app.loading = false
          app.queryParam = {}
          app.$refs.table.refresh()
          app.visible1 = false
        } else {
          app.loading = false
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    submitTransfer () {
      const app = this
      const data = {}
      const arr = []
      app.loading = true
      data['to_uid'] = app.transferForm.to
      if (app.selectedRowKeys.length === 0) {
        arr[0] = app.id
        data['cids'] = arr
      } else {
        data['cids'] = app.selectedRowKeys
      }
      postTransfer(data).then(res => {
        if (res.status === 0) {
          app.loading = false
          app.selectedRowKeys = []
          app.$refs.table.refresh()
          app.visible = false
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    copy () {
      const clipboard = new Clipboard('.copy')
      clipboard.on('success', e => {
        this.$message.success('复制成功')
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message.error('复制失败')
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
    }
    // delCustomer (id) {
    //   const app = this
    //   app.$confirm({
    //     title: '是否永久删除此客户',
    //     onOk: () => {
    //       delProblem(id).then(res => {
    //         if (res.status === 0) {
    //           app.$refs.table.refresh()
    //         } else {
    //           app.$warning({
    //             title: res.msg
    //           })
    //         }
    //       })
    //     }
    //   })
    // }
  }
}
</script>

<style scoped>

</style>
